
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-jinbi"></i>
                    <div class="name">金币</div>
                    <div class="fontclass">.icon-jinbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianhao"></i>
                    <div class="name">减号</div>
                    <div class="fontclass">.icon-jianhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-jiahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuan"></i>
                    <div class="name">圆</div>
                    <div class="fontclass">.icon-yuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-topnav"></i>
                    <div class="name">topnav</div>
                    <div class="fontclass">.icon-topnav</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-naozhong1"></i>
                    <div class="name">闹钟</div>
                    <div class="fontclass">.icon-naozhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihao2"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihao2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche1"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang1"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yunfeiche"></i>
                    <div class="name">运费车</div>
                    <div class="fontclass">.icon-yunfeiche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangjiantou"></i>
                    <div class="name">箭头-上</div>
                    <div class="fontclass">.icon-shangjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuangjiantou"></i>
                    <div class="name">双箭头</div>
                    <div class="fontclass">.icon-shuangjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianjibi"></i>
                    <div class="name">编辑_笔</div>
                    <div class="fontclass">.icon-bianjibi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bukexuan"></i>
                    <div class="name">不可选</div>
                    <div class="fontclass">.icon-bukexuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liebiao"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.icon-liebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shaixuan"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-shaixuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ganhaohao"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.icon-ganhaohao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengxian"></i>
                    <div class="name">生鲜</div>
                    <div class="fontclass">.icon-shengxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangcheng"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.icon-shangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuangounaozhong"></i>
                    <div class="name">团购闹钟</div>
                    <div class="fontclass">.icon-tuangounaozhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chenghao"></i>
                    <div class="name">乘号</div>
                    <div class="fontclass">.icon-chenghao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshoppinggold"></i>
                    <div class="name">购物金</div>
                    <div class="fontclass">.icon-iconshoppinggold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconvoucher"></i>
                    <div class="name">抵用券</div>
                    <div class="fontclass">.icon-iconvoucher</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconeditor"></i>
                    <div class="name">其他信息</div>
                    <div class="fontclass">.icon-iconeditor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icondelete"></i>
                    <div class="name">垃圾箱</div>
                    <div class="fontclass">.icon-icondelete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconcoupon"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-iconcoupon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconbigpicture"></i>
                    <div class="name">大图</div>
                    <div class="fontclass">.icon-iconbigpicture</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenhao"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-wenhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconallcardcouponsred"></i>
                    <div class="name">店铺红包</div>
                    <div class="fontclass">.icon-iconallcardcouponsred</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontdanjiantou1"></i>
                    <div class="name">单箭头-左</div>
                    <div class="fontclass">.icon-iconfontdanjiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontdanjiantou2"></i>
                    <div class="name">单箭头-下</div>
                    <div class="fontclass">.icon-iconfontdanjiantou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontdanjiantou3"></i>
                    <div class="name">单箭头-右</div>
                    <div class="fontclass">.icon-iconfontdanjiantou3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontdanjiantou"></i>
                    <div class="name">单箭头-上</div>
                    <div class="fontclass">.icon-iconfontdanjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xjt"></i>
                    <div class="name">箭头-下</div>
                    <div class="fontclass">.icon-xjt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-4"></i>
                    <div class="name">正品保障</div>
                    <div class="fontclass">.icon-4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zy"></i>
                    <div class="name">自营</div>
                    <div class="fontclass">.icon-zy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hwcg"></i>
                    <div class="name">海外采购</div>
                    <div class="fontclass">.icon-hwcg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bsqfh"></i>
                    <div class="name">保税区发货</div>
                    <div class="fontclass">.icon-bsqfh</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti1"></i>
                    <div class="name">关税</div>
                    <div class="fontclass">.icon-weibiaoti1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feiji1"></i>
                    <div class="name">飞机</div>
                    <div class="fontclass">.icon-feiji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-select"></i>
                    <div class="name">select</div>
                    <div class="fontclass">.icon-select</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconflag"></i>
                    <div class="name">旗帜</div>
                    <div class="fontclass">.icon-iconflag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-untitled5"></i>
                    <div class="name">退货处理</div>
                    <div class="fontclass">.icon-untitled5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-untitled"></i>
                    <div class="name">代发货</div>
                    <div class="fontclass">.icon-untitled</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-untitled2"></i>
                    <div class="name">代付款</div>
                    <div class="fontclass">.icon-untitled2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-untitled3"></i>
                    <div class="name">代收货</div>
                    <div class="fontclass">.icon-untitled3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-untitled4"></i>
                    <div class="name">卡卷</div>
                    <div class="fontclass">.icon-untitled4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-untitled1"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-untitled1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guang"></i>
                    <div class="name">逛</div>
                    <div class="fontclass">.icon-guang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba"></i>
                    <div class="name">喇叭</div>
                    <div class="fontclass">.icon-laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chahao"></i>
                    <div class="name">叉号</div>
                    <div class="fontclass">.icon-chahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontopup"></i>
                    <div class="name">icon_top up</div>
                    <div class="fontclass">.icon-icontopup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconsefpoint"></i>
                    <div class="name">icon_sefpoint</div>
                    <div class="fontclass">.icon-iconsefpoint</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconsef"></i>
                    <div class="name">icon_sef</div>
                    <div class="fontclass">.icon-iconsef</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconcard"></i>
                    <div class="name">icon_card</div>
                    <div class="fontclass">.icon-iconcard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontuikuan"></i>
                    <div class="name">icon_tuikuan</div>
                    <div class="fontclass">.icon-icontuikuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconpinglun"></i>
                    <div class="name">icon_pinglun</div>
                    <div class="fontclass">.icon-iconpinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconcar"></i>
                    <div class="name">icon_car</div>
                    <div class="fontclass">.icon-iconcar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icondaishouhuo"></i>
                    <div class="name">icon_daishouhuo</div>
                    <div class="fontclass">.icon-icondaishouhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconpurse"></i>
                    <div class="name">icon_purse</div>
                    <div class="fontclass">.icon-iconpurse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconxinxi"></i>
                    <div class="name">icon_xinxi</div>
                    <div class="fontclass">.icon-iconxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconparcel"></i>
                    <div class="name">icon_parcel</div>
                    <div class="fontclass">.icon-iconparcel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">icon－！</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontime"></i>
                    <div class="name">icon－time</div>
                    <div class="fontclass">.icon-icontime</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinglun"></i>
                    <div class="name">pinglun</div>
                    <div class="fontclass">.icon-pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin"></i>
                    <div class="name">yuyin</div>
                    <div class="fontclass">.icon-yuyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconzambia"></i>
                    <div class="name">zan</div>
                    <div class="fontclass">.icon-iconzambia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time1"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chengzhang"></i>
                    <div class="name">chengzhang</div>
                    <div class="fontclass">.icon-chengzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-coefficient"></i>
                    <div class="name">coefficient</div>
                    <div class="fontclass">.icon-coefficient</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuan"></i>
                    <div class="name">huiyuan</div>
                    <div class="fontclass">.icon-huiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuan3"></i>
                    <div class="name">huiyuan3</div>
                    <div class="fontclass">.icon-huiyuan3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingxi"></i>
                    <div class="name">jingxi</div>
                    <div class="fontclass">.icon-jingxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liquan"></i>
                    <div class="name">liquan</div>
                    <div class="fontclass">.icon-liquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liwu"></i>
                    <div class="name">liwu</div>
                    <div class="fontclass">.icon-liwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengji"></i>
                    <div class="name">shengji</div>
                    <div class="fontclass">.icon-shengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengri"></i>
                    <div class="name">shengri</div>
                    <div class="fontclass">.icon-shengri</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingxi2"></i>
                    <div class="name">jingxi-2</div>
                    <div class="fontclass">.icon-jingxi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liquan1"></i>
                    <div class="name">liquan-1</div>
                    <div class="fontclass">.icon-liquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liwu1"></i>
                    <div class="name">liwu-1</div>
                    <div class="fontclass">.icon-liwu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengji1"></i>
                    <div class="name">shengji-1</div>
                    <div class="fontclass">.icon-shengji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengri1"></i>
                    <div class="name">shengri-1</div>
                    <div class="fontclass">.icon-shengri1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-classification"></i>
                    <div class="name">classification</div>
                    <div class="fontclass">.icon-classification</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconremindoff"></i>
                    <div class="name">icon_remind_off</div>
                    <div class="fontclass">.icon-iconremindoff</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">shoucang</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconjine"></i>
                    <div class="name">icon_jine</div>
                    <div class="fontclass">.icon-iconjine</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1"></i>
                    <div class="name">icon_？</div>
                    <div class="fontclass">.icon-icon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xin"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.icon-xin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanjinbi2"></i>
                    <div class="name">赚金币2</div>
                    <div class="fontclass">.icon-zhuanjinbi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-39"></i>
                    <div class="name">圆</div>
                    <div class="fontclass">.icon-39</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshoppingcart"></i>
                    <div class="name">icon_shoppingcart</div>
                    <div class="fontclass">.icon-iconshoppingcart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfootprint"></i>
                    <div class="name">icon_footprint</div>
                    <div class="fontclass">.icon-iconfootprint</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconhorn"></i>
                    <div class="name">icon_horn</div>
                    <div class="fontclass">.icon-iconhorn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshare"></i>
                    <div class="name">icon_share</div>
                    <div class="fontclass">.icon-iconshare</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconmoney"></i>
                    <div class="name">icon_money</div>
                    <div class="fontclass">.icon-iconmoney</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconedit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-iconedit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconperson"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.icon-iconperson</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuanfulilibao"></i>
                    <div class="name">welfare</div>
                    <div class="fontclass">.icon-huiyuanfulilibao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icongift"></i>
                    <div class="name">icon_gift</div>
                    <div class="fontclass">.icon-icongift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfn"></i>
                    <div class="name">momo</div>
                    <div class="fontclass">.icon-iconfn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icongoods"></i>
                    <div class="name">icon_goods</div>
                    <div class="fontclass">.icon-icongoods</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon7day"></i>
                    <div class="name">icon_7day</div>
                    <div class="fontclass">.icon-icon7day</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconcompensate"></i>
                    <div class="name">icon_Compensate</div>
                    <div class="fontclass">.icon-iconcompensate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icondelivery"></i>
                    <div class="name">icon_Delivery</div>
                    <div class="fontclass">.icon-icondelivery</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconpayment"></i>
                    <div class="name">icon_payment</div>
                    <div class="fontclass">.icon-iconpayment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconticket"></i>
                    <div class="name">icon_ticket</div>
                    <div class="fontclass">.icon-iconticket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renminbi"></i>
                    <div class="name">人民币</div>
                    <div class="fontclass">.icon-renminbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconsign"></i>
                    <div class="name">icon_Sign</div>
                    <div class="fontclass">.icon-iconsign</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gantanhao"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.icon-gantanhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suyuan"></i>
                    <div class="name">溯源</div>
                    <div class="fontclass">.icon-suyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icondelete1"></i>
                    <div class="name">icon_delete</div>
                    <div class="fontclass">.icon-icondelete1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontuandingdan"></i>
                    <div class="name">icon_tuandingdan</div>
                    <div class="fontclass">.icon-icontuandingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontuan"></i>
                    <div class="name">icon_tuan</div>
                    <div class="fontclass">.icon-icontuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-z-camera"></i>
                    <div class="name">照相机</div>
                    <div class="fontclass">.icon-z-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconhua"></i>
                    <div class="name">icon_hua</div>
                    <div class="fontclass">.icon-iconhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon2"></i>
                    <div class="name">icon_！</div>
                    <div class="fontclass">.icon-icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconclear"></i>
                    <div class="name">icon_clear</div>
                    <div class="fontclass">.icon-iconclear</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconzhihuan"></i>
                    <div class="name">icon_zhihuan</div>
                    <div class="fontclass">.icon-iconzhihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconbaoxiu"></i>
                    <div class="name">icon_baoxiu</div>
                    <div class="fontclass">.icon-iconbaoxiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconyuancheng"></i>
                    <div class="name">icon_yuancheng</div>
                    <div class="fontclass">.icon-iconyuancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontgift"></i>
                    <div class="name">icon_tgift</div>
                    <div class="fontclass">.icon-icontgift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconstar"></i>
                    <div class="name">icon_star</div>
                    <div class="fontclass">.icon-iconstar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diqusushetongjibiao"></i>
                    <div class="name">地区宿舍统计表</div>
                    <div class="fontclass">.icon-diqusushetongjibiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xieti"></i>
                    <div class="name">斜体</div>
                    <div class="fontclass">.icon-xieti</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconday"></i>
                    <div class="name">icon_day</div>
                    <div class="fontclass">.icon-iconday</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconaddress"></i>
                    <div class="name">icon_address</div>
                    <div class="fontclass">.icon-iconaddress</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconhot"></i>
                    <div class="name">icon_hot</div>
                    <div class="fontclass">.icon-iconhot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconsearch1"></i>
                    <div class="name">icon_search</div>
                    <div class="fontclass">.icon-iconsearch1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconhome"></i>
                    <div class="name">icon_home</div>
                    <div class="fontclass">.icon-iconhome</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconsee"></i>
                    <div class="name">icon_see</div>
                    <div class="fontclass">.icon-iconsee</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconsee2"></i>
                    <div class="name">icon_see2</div>
                    <div class="fontclass">.icon-iconsee2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_more"></i>
                    <div class="name">icon_more</div>
                    <div class="fontclass">.icon-icon_more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkrecord"></i>
                    <div class="name">checkrecord</div>
                    <div class="fontclass">.icon-checkrecord</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-house"></i>
                    <div class="name">house</div>
                    <div class="fontclass">.icon-house</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_jyg"></i>
                    <div class="name">icon_jyg</div>
                    <div class="fontclass">.icon-icon_jyg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengxian1"></i>
                    <div class="name">sx</div>
                    <div class="fontclass">.icon-shengxian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_gift"></i>
                    <div class="name">icon_gift</div>
                    <div class="fontclass">.icon-icon_gift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuanshi"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-zuanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新1</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengji2"></i>
                    <div class="name">升级</div>
                    <div class="fontclass">.icon-shengji2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpinfenlei"></i>
                    <div class="name">商品分类</div>
                    <div class="fontclass">.icon-shangpinfenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye1"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodedingdan"></i>
                    <div class="name">我的订单</div>
                    <div class="fontclass">.icon-wodedingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_yifukuan"></i>
                    <div class="name">icon_已付款</div>
                    <div class="fontclass">.icon-icon_yifukuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_kaipiao"></i>
                    <div class="name">icon_kaipiao</div>
                    <div class="fontclass">.icon-icon_kaipiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_shoppingcart"></i>
                    <div class="name">icon_shoppingcart(1)</div>
                    <div class="fontclass">.icon-icon_shoppingcart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_dingdan"></i>
                    <div class="name">icon_dingdan</div>
                    <div class="fontclass">.icon-icon_dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_my"></i>
                    <div class="name">icon_my</div>
                    <div class="fontclass">.icon-icon_my</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
